<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/html;  charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="shortcut icon" href=""> -->

    <title>시작하기</title>

    <!-- Bootstrap core CSS -->
	<link href="/resources/css/bootstrap.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="/resources/js/html5shiv.js"></script>
      <script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="/resources/js/jquery-1.11.0.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript">
	    /* var code = '${errorCode}';
		if(code == ""){
			alert('잘못된 접근입니다.');
			Location.href=history.back();
		}
		if(code == 1){
			alert('잘못된 접근입니다.');
			Location.href=history.back();
		}
		if(code == 2){
			alert('서버 문제로 회원가입을 할 수 없습니다. 잠시 후 다시 이용해 주세요');
			Location.href=history.back();
		} */
    	function readURL(input){
    		if (input.files && input.files[0]) {
    			
    			if(input.value.substr(input.value.length-3) == "jpg" || input.value.substr(input.value.length-3) == "gif" || input.value.substr(input.value.length-3) == "bmp" || input.value.substr(input.value.length-3) == "png"){
					var reader = new FileReader();
                    reader.onload = function (e) {
                    	
                    	var previewImage = $('#previewImage');
                    	previewImage.attr('src', e.target.result)
                        .attr('width', 250)
                        .attr('height', 250);
                        $('#CompleteButton').html("저장후 완료하기");
                    };
                    
                    reader.readAsDataURL(input.files[0]);
    			}else{
    				alert('사진만 올릴 수 있습니다');
    				return false;
    				
    			}
            }
    	}
    	
    	// 정보입력 공개범위 저장하기
    	function setPrivate(type, value){
    		if(type== 'HighSchool'){ $('#HighSchoolPrivate').val(value); }
    		if(type== 'College'){ $('#CollegePrivate').val(value); }
    		if(type== 'Workplace'){ $('#WorkplacePrivate').val(value); }
    		if(type== 'Residence'){ $('#ResidencePrivate').val(value); }
    	}
    	
    	// 두번째 단계에서 하나라도 입력하면 버튼 텍스트 바꾸기
    	function step2ButtonChange(){
    		$("#step2Button").html("저장하고 넘어가기")
    		.removeClass()
    		.addClass("btn btn-success next");
    	}
    	
    	// 완료 버튼 이벤트
    	function complete(f){
    		f.action = "/memberRegistComplete";
    		f.submit();
    	}
    	
    	$(document).ready(function(){
    		$('.next').click(function(){
    			var nextId = $(this).parents('.tab-pane').next().attr("id");
    			$('[href=#'+nextId+']').tab('show');

    	    	});

    		$('#myTab a:first').tab('show');
    		
    		// 그룹검색 메소드
    		$('#GroupNameSearch').click(function(){
    			if($('#InputGroupName').val() == ""){
    				alert('잘못된 검색어 입니다.');
    				return false;
    			}
    			
    			$.ajax({
    			    type : "POST"
    			    , url : "/searchGroupName?name="+$('#InputGroupName').val()
    			    , dataType : "json"
    			    , timeout : 5000
    			    , error : function(request, status, error) {
    			    	alert("그룹을 검색할 수 없습니다.\r잠시후 다시 이용해 주세요");
    			    }
    			    , success : function(response, status, request) {
    			    	if(response == ""){
    			    		$('#SearchGroupList').html("<i class='fa fa-times'></i> 검색 결과가 없습니다.");
    			    	}else{
    			    		$('#SearchGroupList').html("");
    			    		for(var i=0;i<response.length;i++){
    			    			$('#SearchGroupList').append("<div style='padding:7px;cursor:pointer;' onmouseover='this.style.background=\"#B6B6B6\"' onmouseout='this.style.background=\"#ffffff\"'>"+response[i].name+ "<i style='margin-left:15px;color:#797979;'>"+response[i].manager+"<i></div>");
    			    		}
    			    	}
    			    }
    			    , beforeSend: function() {
    			    	$('#ajax_indicator').show().fadeIn('fast'); 
    			    }
    			    , complete: function() {
    			    	$('#ajax_indicator').fadeOut('fast');
    			    }
    			});
    			$('#SearchGroupList').show(200);
    		});
    		// 대학교검색 자동완성
    		$("#InputCollege").focus(function(){
    			$.getScript('/resources/js/availableCollege.js', function()
    					{
    				$("#InputCollege").autocomplete({
    					delay: 0,
    	    			source: availableCollege
    	    	    });
    			});
    		});
    		
    		// 거주지 자동완성
    		$("#InputResidence").focus(function(){
    			$.getScript('/resources/js/availableCity.js', function()
    					{
    				$("#InputResidence").autocomplete({
    					delay: 0,
    	    			source: availableCity
    	    	    });
    			});
    		});
    		
    		// 공개범위 버튼 클릭 이벤트
    		$('.dropdown-menu li a').on('click', function(){
    			$(this).parent().parent().find('li').each(function(){
    				$(this).removeClass();
    			});
    			$(this).parent().addClass('active');
    		});
    		
    	});//end ready
    </script>
    <style type="text/css">
		
		body{ 
			padding-top: 50px;
			padding-bottom: 80px;
			background-color:#E9EAED;
		}
    	
    	.commonFont{
    		font-family: 'Nanum Gothic', sans-serif;
    	}
    	
    	.navbar{
			box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
		}
		.tab-content{
			border-left:1px solid #DBDBDB;
			border-bottom:1px solid #DBDBDB;
			border-right:1px solid #DBDBDB;
			padding:15px;
			background-color: #fff;
		}
    </style>
    <!--[if gte IE 9]>
	  <style type="text/css">
	    .gradient {
	       filter: none;
	    }
	  </style>
	<![endif]-->
  </head>

  <body>
    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/" style="font-family: 'Alef', sans-serif; color:#624E98" title="홈">Circles</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="언어선택">언어 : <span id="selectLang">한국어</span><b class="caret"></b></a>
              <ul class="dropdown-menu" style="min-width: 125px;">
                <li class="active"><a href="#">한국어</a></li>
                <li><a href="javascript:alert('English service is coming soon')" >English</a></li>
                <li><a href="javascript:alert('中国服务准备')">简体中文</a></li>
                <li><a href="javascript:alert('日本のサービスは準備中です')">日本語</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
    <!-- Fixed navbar -->
    
	<!-- main warp -->
	<form id="f" method="post" enctype="multipart/form-data">
	<input type="hidden" id="UserNum" name="UserNum" value="${userDto.num}">
	<div>
    	<div class="container" style="margin-top:25px;">
    		<h2>시작하기</h2>
    		<p style="color:#9B9B9B;">간단한 세단계 설정을 통해 유용하게 이용해 보세요.</p>
    		<ul class="nav nav-tabs" id="myTab">
    			<li class="active"><a href="#step1" data-toggle="tab"><span class="badge">1</span> 단계</a></li>
    			<li><a href="#step2" data-toggle="tab"><span class="badge">2</span> 단계</a></li>
    			<li><a href="#step3" data-toggle="tab"><span class="badge">3</span> 단계</a></li>
    		</ul>
    		
    		<div class="tab-content">
    			<!-- 첫 단계 -->
    			<div class="tab-pane fade in active" id="step1">
    				<h4>그룹을 찾아보세요</h4>
    				<small>친구들이 이미 서클을 사용중이라면 그룹을 검색하고 가입해 보세요</small>
    				<p> </p>
    				<div class="row">
    					<div class="col-xs-12 col-md-6 col-lg-5">
    						<div class="row">
    							<div class="col-xs-8">
    								<label for="InputGroupName" class="sr-only">그룹명</label>
									<input type="text" class="form-control" id="InputGroupName" name="InputGroupName" placeholder="그룹명" maxlength="20">
								</div>
								<div class="col-xs-4" style="padding-left:0px;">
									<button type="button" class="btn btn-default" id="GroupNameSearch">&nbsp;&nbsp;<span class="fa fa-search">&nbsp;&nbsp;</span></button>
								</div>
							</div>
							<div class="well" style="background-color:#ffffff; display:none; margin-top:10px; border:1px #CCCCCC solid; padding:10px; width:80%;" id="SearchGroupList">
								<div id="ajax_indicator" style="display:none">
									<p style="text-align:center; padding:16px 0 0 0; left:30%; top:50%; position:absolute;"><img src="/resources/img/ajax-loader.gif" /></p>
								</div>
								<div>
									
									
								</div>
							</div>
    					</div>
    				</div>
    				<hr>
    				<h4>찾는 그룹이 없나요? 먼저 그룹을 생성해보세요</h4>
    				<small>그룹을 생성하고 친구들을 초대해 보세요</small>
    				<p> </p>
    				<div class="row">
    					<div class="col-xs-12 col-md-6 col-lg-5">
    						<div class="row">
    							<div class="col-xs-8">
    								<label for="InputGroupName" class="sr-only">그룹명</label>
									<input type="text" class="form-control" id="InputGroupName" placeholder="그룹명" maxlength="14">
								</div>
								<div class="col-xs-4" style="padding-left:0px;">
									<button type="button" class="btn btn-primary">그룹만들기</button>
								</div>
							</div>
    					</div>
    				</div>
    				<p>&nbsp;</p>
    				<a class="btn btn-info next" href="#">건너뛰기</a>
    			</div>
    			<!-- 두번째 단계 -->
    			<div class="tab-pane fade" id="step2">
    				<h4>정보입력</h4>
    				<small>회원님의 학교 및 직장정보를 입력하면, 그룹을 찾는데 도움이 됩니다.</small>
    				<p> </p>
    				<div class="row">
    					<div class="col-xs-12 col-md-6 col-lg-5">
    						<div class="row">
    							<div class="col-xs-8">
    								<label for="InputHighSchool" class="sr-only">고등학교</label>
									<input type="text" class="form-control" id="InputHighSchool" name="InputHighSchool" placeholder="고등학교 이름" maxlength="10" onchange="step2ButtonChange();">
								
								</div>
								<div class="col-xs-4" style="padding-left:0px;">
									<div class="btn-group">
										<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">공개범위 <span class="caret"></span></button>
										<ul class="dropdown-menu" style="min-width: 0px;">
											<li class="active"><a href="javascript:setPrivate('HighSchool', 'all');">전체공개</a></li>
											<li><a href="javascript:setPrivate('HighSchool', 'group');">그룹공개</a></li>
											<li><a href="javascript:setPrivate('HighSchool', 'none');">비공개</a></li>
										</ul>
										<input type="hidden" id="HighSchoolPrivate" name="HighSchoolPrivate" value="all">
									</div>
								</div>
							</div>
							<p> </p>
							<div class="row">
    							<div class="col-xs-8">
    								<label for="InputCollege" class="sr-only">대학교</label>
									<input type="text" class="form-control" id="InputCollege" name="InputCollege" placeholder="대학교 이름" maxlength="10" onchange="step2ButtonChange();">
								</div>
								<div class="col-xs-4" style="padding-left:0px;">
									<div class="btn-group">
										<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">공개범위 <span class="caret"></span></button>
										<ul class="dropdown-menu" style="min-width: 0px;">
											<li class="active"><a href="javascript:setPrivate('College', 'all');">전체공개</a></li>
											<li><a href="javascript:setPrivate('College', 'group');">그룹공개</a></li>
											<li><a href="javascript:setPrivate('College', 'none');">비공개</a></li>
										</ul>
										<input type="hidden" id="CollegePrivate" name="CollegePrivate" value="all">
									</div>
								</div>
							</div>
							<p> </p>
							<div class="row">
    							<div class="col-xs-8">
    								<label for="InputWorkplace" class="sr-only">직장</label>
									<input type="text" class="form-control" id="InputWorkplace" name="InputWorkplace" placeholder="회사 이름" maxlength="10" onchange="step2ButtonChange();">
								</div>
								<div class="col-xs-4" style="padding-left:0px;">
									<div class="btn-group">
										<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">공개범위 <span class="caret"></span></button>
										<ul class="dropdown-menu" style="min-width: 0px;">
											<li class="active"><a href="javascript:setPrivate('Workplace', 'all');">전체공개</a></li>
											<li><a href="javascript:setPrivate('Workplace', 'group');">그룹공개</a></li>
											<li><a href="javascript:setPrivate('Workplace', 'none');">비공개</a></li>
										</ul>
										<input type="hidden" id="WorkplacePrivate" name="WorkplacePrivate" value="all">
									</div>
								</div>
							</div>
							<p> </p>
							<div class="row">
    							<div class="col-xs-8">
    								<label for="InputResidence" class="sr-only">거주지</label>
									<input type="text" class="form-control" id="InputResidence" name="InputResidence" placeholder="거주지" maxlength="20" onchange="step2ButtonChange();">
								</div>
								<div class="col-xs-4" style="padding-left:0px;">
									<div class="btn-group">
										<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">공개범위 <span class="caret"></span></button>
										<ul class="dropdown-menu" style="min-width: 0px;">
											<li class="active"><a href="javascript:setPrivate('Residence', 'all');">전체공개</a></li>
											<li><a href="javascript:setPrivate('Residence', 'group');">그룹공개</a></li>
											<li><a href="javascript:setPrivate('Residence', 'none');">비공개</a></li>
										</ul>
										<input type="hidden" id="ResidencePrivate" name="ResidencePrivate" value="all">
									</div>
								</div>
							</div>
    					</div>
    				</div>
    				<p></p>
    				<small><span class="fa fa-exclamation"></span> 공개범위는 언제든지 수정할 수 있습니다.</small>
    				<p>&nbsp;</p>
    				<a class="btn btn-info next" href="#" id="step2Button" >건너뛰기</a>
    			</div>
    			
    			<!-- 세번째 단계 -->
    			<div class="tab-pane fade" id="step3">
    				<h4>프로필 사진을 설정하세요.</h4>
    				<input type="file" id="UploadImage" name="UploadImage" value="사진" style="visibility: hidden;" onchange="readURL(this)" accept=".gif,.jpg,.bmp,.png">
    				
    				<!-- 일반 가입자는 기본프로필사진 보여주기 -->
    				<c:if test="${userDto.loginApp eq 'default'}">
    					<img id="previewImage" src="/resources/img/default_profile_pic.png" alt="프로필 사진" width="250px;" height="250px;" class="img-thumbnail" /><br>
    				</c:if>
    				<!-- 페이스북 회원일경우 페이스북 프로필사진 가져오기 -->
    				<c:if test="${userDto.loginApp eq 'fb'}">
    					<img id="previewImage" src="/profileImageViewer/${userDto.num}" alt="프로필 사진" width="250px;" height="250px;" class="img-thumbnail" /><br>
    				</c:if>
    				
    				<button type="button" style="margin-top:10px;" class="btn btn-primary" onclick ="javascript:document.getElementById('UploadImage').click();"><span class="fa fa-camera"> 사진가져오기</span></button><br><br>
    				<a class="btn btn-success next" href="javascript:complete(f);" id="CompleteButton">완료하기</a>
    			</div>
    		</div>
		</div>
	</div>
	</form>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/resources/js/bootstrap.js"></script>
    
  </body>
</html>